import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile-v2'
import { Link } from 'react-router-dom'
import NavHeader from '../../components/Headnavbar'

import styles from './index.module.css'

import { API } from '../../utils/api'

// 导入处理表单的  withFormik
import { withFormik } from 'formik'
// 导入yup
import * as Yup from 'yup'
import withHook from '../../utils/Withhook'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Registe extends Component {
  render() {
    let { values, handleChange, handleSubmit, errors } = this.props
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader} title="账号注册"></NavHeader>
        <WhiteSpace size="xl" />
        {/* 登录表单 */}
        <WingBlank>
          <form onSubmit={handleSubmit}>
            <div className={styles.formItem}>{/* 账号文本框 */}
              <input
                className={styles.input}
                name="username"
                placeholder="请输入账号"
                value={values.username}
                onChange={handleChange}
              />
            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            {errors.username && <div className={styles.error}>{errors.username}</div>}
            <div className={styles.formItem}>{/* 密码文本框 */}
              <input
                value={values.password}
                onChange={handleChange}
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"
              />
            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            {/* 1 按钮在form里面 并且 type是submit 提交按钮 会触发 表单提交onsubmit事件 
                --表单提交onsubmit事件  默认页面会刷新---需要阻止  e.preventDefault()
                2 按钮是type="button" 普通按钮 --只能触发onClick
            */}
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                注册
              </button>
            </div>
          </form>
          <Flex className={styles.backHome} justify="between">
            <Link to="/home">点我回首页</Link>
            <Link to="/login">已有账号，去登录</Link>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}
// export default Login
// 用withFormik 包裹起来--所有的配置都在props里面有
const hoo1Registe=withFormik({
  //  配置
  mapPropsToValues: () => ({ username: '', password: '' }), //相当于state 提供初始数据 return 只有一个对象,简写 用()包裹起来
  validationSchema: Yup.object().shape({
    username: Yup.string().required('请输入用户名！！').matches(REG_UNAME,'用户名要求5-8位'),
    password: Yup.string().required('请输入密码！！').matches(REG_PWD,'密码必须5-12位')
  }),
  handleSubmit: async (values, { props }) => {
    console.log("提交了aaa ", values)
    let { username, password } = values
    let res = await API.post(`http://localhost:8080/user/registered`,{username,password})
    console.log("注册结果", res)
    console.log(props)
    if (res.data.status === 200) {
      Toast.success("注册成功", 2)
      localStorage.setItem("my_token", res.data.body.token)
    } else {
      Toast.fail("注册失败", 2)
    }
  }
})(Registe);
const hoo2Registe=withHook(hoo1Registe)

export default hoo2Registe
